<div id="container">
  <aside>
    <header>
      <input type="text" placeholder="search">
    </header>

    <ul>
      <li *ngFor="let u of ul" (click)="onClickCustomer(u.userid,u.nickname)">
<!--      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/chat_avatar_01.jpg" alt="">-->
        <nz-avatar [nzSize]="48"  nzIcon="user" nzSrc="/assets/images/tom.jpg" style="margin: 10px"></nz-avatar>
      <div>
        <h2>{{u.nickname}}</h2>
        <h3>
          <span class="status orange"></span>
          {{u.role}}
        </h3>
      </div>
      </li>




    </ul>



  </aside>

  <main>
    <header>
      <div>
        <h2>Chat with {{selectcustomname}}</h2>
        <h3>{{mynickname}}</h3>
      </div>
    </header>
    <ul id="chat">
      <li class="you">
        <div class="entete">
          <span class="status green"></span>
          <h2>Vincent</h2>
          <h3>10:12AM, Today</h3>
        </div>
        <div class="triangle"></div>
        <div class="message">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        </div>
      </li>
      <li class="me">
        <div class="entete">
          <h3>10:12AM, Today</h3>
          <h2>Vincent</h2>
          <span class="status blue"></span>
        </div>
        <div class="triangle"></div>
        <div class="message">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        </div>
      </li>
    </ul>


    <footer>
      <textarea placeholder="Type your message" [(ngModel)]="inputtext"></textarea>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_picture.png" alt="">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_file.png" alt="">
      <a [disabled]="touserid.length==0" nz-button nzType="primary" (click)="sendTextMessage()">发送</a>
    </footer>
  </main>

</div>
